<template>
<el-menu
  class="header-nav"
  :default-active="activeIndex"
  mode="horizontal"
  :router="isOpenRouter"
  background-color="#409EFF"
  text-color="#fff"
  active-text-color="#fff">
  <el-menu-item 
    v-for="item in menus" :key="item.id"
    :route="item.url"
    :index="item.id">
    {{item.name}}
  </el-menu-item>
</el-menu>
</template>

<script>
export default {
  name: "HeaderNav",
  data() {
    return {
      activeIndex: '1',
      isOpenRouter: true,
      menus: [
        {
          id: '1',
          url: "/",
          name: "首页"
        },
        {
          id: '2',
          url: "/hotels",
          name: "国内酒店"
        },
        {
          id: '3',
          url: "/hotelsf",
          name: "国际·港澳台酒店"
        },
        {
          id: '4',
          url: "/flight",
          name: "机票"
        },
        {
          id: '5',
          url: "/train",
          name: "火车票"
        },
        {
          id: '6',
          url: "/bus",
          name: "汽车票"
        },
        {
          id: '7',
          url: "/trip",
          name: "旅游指南"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.header-nav {
  margin: 0 auto;
  width: 70em;
}
.el-menu--horizontal {
  .el-menu-item {
    border-bottom: none;
  }
  .el-menu-item.is-active {
    border-bottom: none;
    background-color:#337ecc!important;
  }
}
</style>
